<template>
  <view class="index-container">
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
      <swiper-item v-for="(item, index) in carouselData" :key="index" class="swiper-item">
        <image :src="item.image_url" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 服务按钮行 -->
    <view class="service-buttons">
      <view class="button-item" @click="navigateTo('product')">
        <image src="/static/icon/guanguan.png" class="service-image"></image>
        <text class="service-text">宠物用品</text>
      </view>
      <view class="button-item" @click="navigateTo('service')">
        <image src="/static/icon/paozao.png" class="service-image"></image>
        <text class="service-text">宠物服务</text>
      </view>
      <view class="button-item" @click="navigateTo('soldlive')">
        <image src="/static/icon/chongwu.png" class="service-image"></image>
        <text class="service-text">宠物领养</text>
      </view>
    </view>

    <!-- 商品推荐标题 -->
    <view class="recommend-title">
      <text class="recommend-text">商品推荐</text>
    </view>

    <!-- 商品推荐区域 -->
    <view class="product-recommend">
      <view class="product-item" v-for="(product, index) in productList" :key="index" @click="toProductDetails(product.id)">
        <image :src="product.img" class="product-image"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <view class="product-prices">
            <text v-if="product.discount_price" class="product-discount-price">￥{{ product.discount_price }}</text>
			<text v-if="product.discount_price" class="product-original-price">￥{{ product.original_price }}</text>
			<text v-else class="product-original-price2">￥{{ product.original_price }}</text>
          </view>
        </view>
      </view>
    </view>
	 <view class="no-more">没有更多啦</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      carouselData: [],
      productList: []
    };
  },
  onLoad() {
    this.fetchCarouselData();
    this.fetchProductList();
  },
  methods: {
    fetchCarouselData() {
      uni.request({
        url: 'http://localhost:8887/homecarousel/findAll',
        method: 'GET',
        success: (res) => {
          if (res.data.code === 200) {
            this.carouselData = res.data.data;
          } else {
            uni.showToast({
              title: '获取轮播图数据失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
    fetchProductList() {
      uni.request({
        url: 'http://localhost:8887/Product/selectrecommend?recommend=推荐',
        method: 'GET',
        success: (res) => {
          if (res.data.code === 200) {
            this.productList = res.data.data;
          } else {
            uni.showToast({
              title: '获取商品推荐数据失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
    navigateTo(page) {
      const routes = {
        'product': '/pages/product/product',
        'service': '/pages/service/service',
        'soldlive': '/pages/soldlive/soldlive'
      };
      uni.navigateTo({
        url: routes[page]
      });
    },
	toProductDetails(productId) {
	  uni.navigateTo({
	    url: `/pages/productdetails/productdetails?id=${productId}`,
	  });
	}
  }
};
</script>

<style>
.index-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.swiper {
  width: 100%;
  height: 200px;
  
}
swiper-item {
  width: 100%;
  height: 100%;
}
.swiper-item>image {
  width: 100%;
  height: 100%;
   object-fit: cover;
}

.service-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 20px;
}

.button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.service-image {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.service-text {
  font-size: 16px;
  color: #333;
}

.recommend-title {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.recommend-text {
  font-size: 18px;
  color: #e60012;
}

.product-recommend {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product-item {
  width: 45%; /* 根据需要调整宽度 */
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-image {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

.product-info {
  text-align: center;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-prices {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.product-original-price {
  font-size: 16px;
  color: #333;
  text-decoration: line-through;
}
.product-original-price2 {
  font-size: 16px;
  color: #333;
}


.no-more {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 16px;
}

.product-discount-price {
  font-size: 16px;
  color: #e60012;
}
</style>